<template>
  <Row class="example">
    <Col :span="12" ref="left" class="example-demo">
      <slot name="demo"></slot>
    </Col>
    <Col :span="0" class="example-split"></Col>
    <Col :span="12">
      <Code bg lang="html" :max-height="rightOffsetHeight">
        <slot name="code"></slot>
      </Code>
    </Col>
  </Row>
</template>

<script>
import Code from '_c/code'
export default {
  name: 'ExampleCode',
  components: {
    Code
  },
  props: ['styles'],
  data: () => {
    return {
      rightOffsetHeight: 0
    }
  },
  mounted () {
    this.$nextTick(() => {
      // 因为 $refs.left 是组件<Col>的引用，因此它不是真正的 dom 元素
      // console.log(this.$refs.left)
      // $refs.left.$el 是真正的 dom
      // console.log(this.$refs.left.$el)
      this.rightOffsetHeight = this.$refs.left.$el.offsetHeight
    })
  },
  computed: {
    maxHeight () {
      return this.rightOffsetHeight
    }
  }
}
</script>

<style lang="less">
  .example {
    background: #FFFFFF;
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 20px;
    position: relative;
    transition: all .2s ease-in-out;
    &:hover {
      box-shadow: 0 2px 7px rgba(0,0,0,.15);
      border-color: transparent;
      position: relative;
    }
    .example-demo {
      padding: 15px;
      position: relative;
    }
    .example-split {
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      border: 1px dashed #eee;
    }
  }
</style>
